<template>
	<Layout :class="'bg-white p-2'">
		<h1>预约回访列表</h1>
		<Row :class="'m-1'">
			<!--表头-->
			<Input :class="'w-25 m-2'" v-model="des" placeholder="请输入回访情况" />
			<Input :class="'w-25 m-2'" v-model="result" placeholder="请输入回访结果" />
			<Input :class="'w-25 m-2'" v-model="method" placeholder="请输入回访方式" />
			<Input :class="'w-25 m-2'" v-model="autor" placeholder="请输入跟进人" />
			<Input :class="'w-25 m-2'" v-model="cu" placeholder="请输入添加人" />
			<Input :class="'w-25 m-2'" v-model="source" placeholder="请输入线索来源" />
			<Input :class="'w-25 m-2'" v-model="name" placeholder="请输入学生姓名" />
			<Input :class="'w-25 m-2'" v-model="tel" placeholder="请输入联系电话" />
		</Row>

		<Row>
			&nbsp;&nbsp;&nbsp;接待时间区间
		</Row>
		<Row :class="'m-1'">
			<Col span="12">
			&nbsp;&nbsp;<DatePicker :class="'w-20'" type="date" v-model="interviewDate1" format="yyyy-MM-dd"
				placement="bottom-end" placeholder="接待时间日期" style="width: 200px"></DatePicker>
			</Col>
			<Col span="12">
			&nbsp;&nbsp;<DatePicker :class="'w-20 '" type="date" v-model="interviewDate2" format="yyyy-MM-dd"
				placement="bottom-end" placeholder="接待时间时刻" style="width: 200px"></DatePicker>
			</Col>
		</Row>
		<Row :class="'m-1'">
			<Col span="12">
			&nbsp;&nbsp;<TimePicker :class="'w-20 '" type="time" v-model="interviewClock1" format="HH:mm:ss"
				placeholder="接待时间日期" style="width: 168px"></TimePicker>
			</Col>
			<Col span="12">
			&nbsp;&nbsp;<TimePicker :class="'w-20'" type="time" v-model="interviewClock2" format="HH:mm:ss"
				placeholder="接待时间时刻" style="width: 168px"></TimePicker>
			</Col>

			<br>
			<!--查询按钮-->
			<Button class="m-2" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>

		</Row>


		</Row>

		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="status">
					<span v-if="row.statu">开</span>
					<span v-else>关</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					
					
					
				
				<Row>
					<Col>
					<Menu >
						<Submenu name="1">
							<template slot="title">
								<Icon type="ios-paper" />
								操作选项
							</template>
							<Button type="error" size="small" @click="remove()">删除</Button>
							<br>
							<Button type="primary" size="small" style="margin-right: 5px"
								@click="show(row)">详细</Button>
							<br>
							<Button type="error" @click="newReservationInterview(row)">新增预约回访记录</Button>
						</Submenu>
					</Menu>
					</Col>
				</Row>
				
				
				
				
				
				</template>
			</Table>
			<!--分页-->
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>

	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				des: "",
				result: "",
				method: "",
				autor: null,
				cu: null,
				source: "",
				name: "",
				tel: "",
				interviewClock1: "",
				interviewClock2: "",
				interviewDate1: "",
				interviewDate2: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [ //表头-----------------------------------				
						{
							title: "学生编号",
							key: "studentId",
						},
						{
							title: "预约回访时间",
							key: "datetime",
						},
						{
							title: "接待人",
							key: "autor",
						},

						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}

			};
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
				this.search();
			},
			newReservationInterview: function(row) {
				this.$router.push({
					name: "reservationBackview_new",
					 params:{
						 row
					 }
				});
			},
			show: function(pId) {
				this.$router.push({
					name: "reservationBackview_detail", //跳转至XX详细页面
					params: {}
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			},
			remove: function(pId) {

				this.message.confirm({
					title: "删除提示",
					content: "即将删除权限，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/backview/delete", //删除url 待定......
							param: {

							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			formatDate: function(date) { //格式化日期方法!
				var d = new Date(date),
					month = '' + (d.getMonth() + 1),
					day = '' + d.getDate(),
					year = d.getFullYear();

				if (month.length < 2) month = '0' + month;
				if (day.length < 2) day = '0' + day;

				return [year, month, day].join('-');
			},
		}, //method
		created: function() {
			this.init();
		},
	}
</script>

<style>
</style>
